<template>
  <div ref="chart" class="chart"></div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { useChart } from '../../hooks/useChart';
const chart = ref();
const { setOptions } = useChart(chart);
const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '25%',
    right: '20%',
    orient: 'vertical',
    itemGap: 25,
    itemHeight: 12,
    itemWidth: 32,
    center: ['25%', '60%'],
    textStyle: {
      color: "#DCECFF",
      fontSize: 16,
      padding:10,
    },
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      center: ['25%', '50%'],
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '数据展示1' },
        { value: 735, name: '数据展示2' },
        { value: 580, name: '数据展示3' },
        { value: 484, name: '数据展示4' },
      ]
    }
  ]
};
const initChart = () => {
  setOptions(option);
};

onMounted(() => {
  initChart();
});
</script>